<!doctype html>
<html>

<head>
		<meta charset="utf-8">
		<title>报名查询</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet"  type="text/css" href="css/iconfont.css">
		<script src="http://cdn.highcharts.com.cn/highcharts/8.1.2/highcharts.js"></script>
		        <script src="https://code.highcharts.com.cn/highcharts/highcharts-more.js"></script>
		        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
	
		<style>
			* {
			    touch-action: pan-y;
			}
			.mui-control-content {
				background-color: white;
				min-height: 50rem;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{
				background-color:#ff9400;
			}
			.mui-table-view .mui-media-object{
				height: 100px;
				max-width: 130px;
			}
			.mui-bar-nav{
					background-color: #e94709;
			}
			.top-return {
			position: absolute;
			    width: 10%;
				top: 0.1875rem;			
					}
					.top-return img{
					    width: 75%;						
							}
			.mui-bar-nav .mui-title{
					color: #FFFFFF;
			}
			
			.top-logo {
			position: absolute;
			    width: 10%;
				left: 28%;
				top: 0.1875rem;			
					}
					.top-logo img{
					    width: 90%;					
							}
			.top-menu {
			position: absolute;
				width: 10%;
				right: 5%;
				top: 0.1875rem;			
					}
					.top-menu img{
						 width: 75%;						
							}
							.mui-bar-tab .mui-tab-item.mui-active{
								color: #ea4609;
							}
					/* 公共部分end */
			.mui-table-view .mui-media, .mui-table-view .mui-media-body{
				line-height: 2rem;
			}
			.mui-slider-indicator.mui-segmented-control .mui-control-item {
				border-left:1px solid #c1c1c1 ;
				border-bottom:1px solid #c1c1c1 ;
				padding: 1px;
				color: #585858;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom:3px solid #e94709 ;
				color: #585858;
			}
			.addtime{
				padding-top: 10px;
				font-size: 10px;
			}
			.top-search{
				position: absolute;
				padding-top: 15%;
				width: 100%;
				background-color: #FFFFFF;
			}
			.top-search .top-input{
				position: absolute;
				width: 100%;
				background: white;
				padding-left: 5%;
			}
			.top-search .top-input .top-btn{
				    position: absolute;
				    top: 0;
				    background: #ec6941;
				    width: 30%;
				    height: 65%;
				    right: 7%;
					text-align: center;
					line-height: 2rem;
					font-size: 0.9375rem;
					border-radius: 0.4375rem;
					color: #FFFFFF;
			}
			.mui-search input[type=search] {
				      background-color: #FFFFFF;
				      border-radius: 0.625rem;
					  border: #d9d9d9 solid 1px;
					  width: 60%;
			}
			.mui-search .mui-placeholder{
				width: 65%;
			}
			.mui-active::before{
				color: #d9d9d9;
			}
			.mui-search .mui-placeholder span{
					color: #d9d9d9;
					margin: 0 10%;
					font-size: 10px;
			}
			.mui-search .mui-placeholder .mui-icon{
					margin: 0;
					color: #d9d9d9;
			}
			.entry-message{
				position: absolute;
				top: 15%;
				width: 100%;
				background-color: #FFFFFF;
			}
			.entry-message p{
				color:#e94709 ;
				padding: 2% 0;
				background-color: #eeeeee;
				font-size: 1rem;
				padding-left: 5%;
			}
			.entry-message #entry-sex{
				width: 350px;
				height:250px;
				background-color: #FFFFFF;
			}
		</style>
		<!-- 公共头部start -->
		<header class="mui-bar mui-bar-nav">
			<a class="top-return mui-action-back"><img src="images/return.png" ></a>
			<a class="top-logo"><img src="images/logo.png" ></a>
			<h1 class="mui-title">	
					Aitimt 爱计时</h1>
			<a href="#popover" id="openPopover" class="top-menu" ><img src="images/menu.png" ></a>
			<div id="popover" class="mui-popover">
			  <ul class="mui-table-view">
			    <li class="mui-table-view-cell"><a href="#">Item1</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item2</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item3</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item4</a></li>
			    <li class="mui-table-view-cell"><a href="#">Item5</a></li>
			  </ul>
			</div>
		</header>
		<!-- 公共头部end -->
		<div class="top-search">
			<div class="top-input">
				<div class="mui-input-row mui-search">
						<input type="search" class="mui-input-clear" placeholder="输入手机号/证件号">
					</div>
				<div class="top-btn">搜索</div>
			</div>				
		</div>
		<div class="entry-message">
			<p>已报选手性别比例图</p>
			  <div id="entry-sex">				  
			  </div>
			  <p>已报选手星座比例图</p>
			    <div id="entry-star">				  
			    </div>
		</div>
		
		<!-- 公共底部start -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="index.html">
				<span class="mui-icon iconfont icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item mui-active" href="event.html">
				<span class="mui-icon iconfont icon-qizhi"></span>
				<span class="mui-tab-label">赛事</span>
			</a>
			<a class="mui-tab-item" href="grade.html">
				<span class="mui-icon iconfont icon-svg"></span>
				<span class="mui-tab-label">成绩</span>
			</a>
			<a class="mui-tab-item" href="my.html">
				<span class="mui-icon iconfont icon-copy"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<!-- 公共底部end -->
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui('.mui-bar').on('tap','a',function(){
				document.location.href=this.href;
			})
			
		 var chart = Highcharts.chart('entry-sex', {
			 colors: ['#e83828','#f39800',],
			 credits: {
			     enabled: false
			 },
		     chart: {
				 heigh:500,
		         spacing : [-20, 0 , 0, 0],
		     },
		     title: {
		         floating:true,
		         text: '报名选手男女比例',
				 style:{
					fontSize:'10px', 
				 }
		     },
		     tooltip: {
		         pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		     },
		     plotOptions: {
		         pie: {
		             allowPointSelect: true,
		             cursor: 'pointer',
		             dataLabels: {
		                 enabled: true,
		                 format: '<b>{point.name}</b>: {point.percentage:.1f} %',
		                 style: {
		                     color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
		                 }
		             },
		             point: {
		                 events: {
		                     mouseOver: function(e) {  // 鼠标滑过时动态更新标题
		                         // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
		                         chart.setTitle({
		                             text: e.target.name+ '\t'+ e.target.y + ' %'
		                         });
		                     }		                    
		                 }
		             },
		         }
		     },
		     series: [{
		         type: 'pie',
		         innerSize: '60%',
		         name: '性别比例图',
				 //数据比例
		         data: [		            
		             ['男性',    75.0],
					 ['女性',    25.0],
		         ]
		     }]
		 }, function(c) { // 图表初始化完毕后的会掉函数
		     // 环形图圆心
		     var centerY = c.series[0].center[1],
		         titleHeight = parseInt(c.title.styles.fontSize);
		     // 动态设置标题位置
		     c.setTitle({
		         y:centerY + titleHeight/2
		     });
		 });
		 // 星座图设置
		var chart = Highcharts.chart('entry-star', {
			 colors: ['#e83828'],
				chart: {
						polar: true,
						type: 'line'
				},	
				title:{
					text:null,
				},
				pane: {
						size: '70%'
				},
				xAxis: {
						categories: ['白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','人马座','摩羯座','宝瓶座','双鱼座'],
						tickmarkPlacement: 'on',
						lineWidth: 0,
						gridLineColor:'#f49f11'
				},
				yAxis: {
						gridLineInterpolation: 'polygon',
						lineWidth: 0,
						min: 0,
						gridLineColor:'#f49f11'
				},
				tooltip: {
						shared: true,
						pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
				},
				legend: {
						// align: 'right',
						// verticalAlign: 'top',
						// y: 70,
						// layout: 'vertical'
				},
				series: [{
						name: '人数',
						data: [1, 2, 2, 2,2, 2,8, 3, 3, 2, 1, 1],
						pointPlacement: 'on',
				}]
		});
		</script>
	
	</body>
	
</html>
